<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="(item, index) in breadList"
      :key="index"
      :to="{ path: item.path }"
      >{{ item.meta.title }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>
<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {},
  props: {},
  watch: {
    $route() {
      this.getBreadcrumb()
    },
  },
  methods: {
    isHome() {
      // console.log(this.$route);
      return this.$route.name === 'home'
    },
    getBreadcrumb() {
      let matched = this.$route.matched.slice(1)
      if (!this.isHome(matched[0])) {
        matched = [
          {
            path: '/home',
            meta: { title: '首页' },
          },
        ].concat(matched)
      }
      this.breadList = matched
      this.store.commit('selectMenu', this.$route)
    },
  },
  created() {
    this.getBreadcrumb()
    sessionStorage.setItem(
      'tabsList',
      JSON.stringify(this.store.state.tabsList)
    )
  },
  setup(props, context) {
    const breadList = ref([])
    const store = useStore()
    return {
      breadList,
      store,
    }
  },
}
</script>
<style scoped lang="less">
// .el-breadcrumb__item:nth-child(2) {
//     /deep/.el-breadcrumb__separator {
//         display: none;
//     }
// }
/deep/.el-breadcrumb__item:last-child {
  .el-breadcrumb__inner {
    color: #000 !important;
    font-weight: 600;
  }
}
/deep/.el-breadcrumb__item:first-child {
  .el-breadcrumb__inner {
    color: #999;
  }
  .el-breadcrumb__inner:hover {
    color: skyblue;
  }
}
/deep/.el-breadcrumb__item:nth-child(3) {
  .el-breadcrumb__inner {
    color: #999;
  }
  .el-breadcrumb__inner:hover {
    color: skyblue;
  }
}
</style>